<style lang="scss" scoped>
.partItem {
  // height: 40px;
  padding: 10px 20px;
  border-bottom: 1px solid #e6e6e6;
  padding-left: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &.active {
    background-color: #3e8ef7;
    color: #fff;
  }
}
</style>
<template>
  <div class="wrapper">
    <el-aside class="sider">
      <div class="topslid">昇科化工有限公司</div>
      <el-tree :data="menuList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-aside>
    <el-main>
      <div class="topBar">
        <i class="el-icon-edit"></i>下级部门
      </div>
      <div class="topOpt" v-if="isAuth('sys:part:add')">
        <el-button size="mini" @click="addposi( '',0)">添加子部门</el-button>
        <!-- <el-button size="mini">调整顺序</el-button> -->
      </div>
      <div class="partTable">
        <div
          v-if="positionList.length==0"
          class="el-table__empty-block"
          style="width: 644px; height: 100%;"
        >
          <span class="el-table__empty-text">暂无数据</span>
        </div>
        <div
          class="partItem"
          :class="[partId==item.value?'active':'']"
          v-for="item in positionList"
          :key="item.value"
          @click="selcetPart(item)"
        >
          <label for="">{{item.lable}}</label>
          
          <div>
            <!-- <el-button size="mini" @click="addposi(item.value,0)">编辑</el-button> -->
            <el-button
              v-if="isAuth('sys:part:del')"
              type="danger"
              size="mini "
              @click="deletePosi(item.value)"
            >删除</el-button>
          </div>
        </div>
      </div>

      <div class="topBar">
        <i class="el-icon-edit"></i>角色
      </div>
      <div style="padding:10px 20px">
        <el-button
          v-if="isAuth('sys:role:add')"
          type="primary"
          size="small "
          icon="el-icon-search"
          @click="addposi('',1)"
        >添加角色</el-button>
        <el-button
          style="margin-right:10px"
          v-if="isAuth('sys:role:del')"
          type="danger"
          @click="deletePosi()"
          :disabled="multipleSelection.length <= 0"
        >批量删除</el-button>

        <!-- <el-dropdown>
          <el-button>
            更多操作
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>批量删除</el-dropdown-item>
            <el-dropdown-item>自定义</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>-->
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
         stripe
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="dataListLoading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="name" label="角色"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="isAuth('sys:role:update')"
              type="primary"
              size="mini"
              @click="addposi(scope.row.id,1)"
            >修改</el-button>
            <el-button
              v-if="isAuth('sys:role:del')"
              type="danger"
              size="mini"
              @click="deletePosi(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 弹窗, 新增 / 修改部门 、角色 -->
    <add-or-update
      v-if="addOrUpdatePosiVisible"
      ref="addOrUpdatePosi"
      @refreshDataList="getPageData"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./posi-update";
export default {
  components: { AddOrUpdate },
  data() {
    return {
      dataListLoading: false,
      addOrUpdatePartVisible: false,
      addOrUpdatePosiVisible: false,
      menuList: [],
      tableData: [],
      partId: "",
      partName: "",

      positionList: [], //下级部门列表
      totalPage: "",
      pageIndex: 1,
      pageSize: "",
      roleName: "",
      selectP: {},
      multipleSelection: [],
      defaultProps: {
        children: "children",
        label: "lable"
      }
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    getPageData() {
      this.$http({
        url: this.$http.adornUrl("/sys/org/list"),
        method: "POST",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.menuList = data.list;
        this.positionList = [];
      });
    },
    //选择一级部门
    handleNodeClick(data) {
      this.positionList = data.children.filter(item => item.type == 0);

      this.selcetPart(data);
    },
    //获取角色
    selcetPart(data) {
      this.partId = data.value;
      this.partName = data.lable;

      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/role/list"),
        method: "POST",
        params: this.$http.adornParams({
          departId: data.value,
          type: 1
        })
      }).then(({ data }) => {
        this.tableData = data.list;
      });
      this.dataListLoading = false;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdatePartVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatePart.init(id);
      });
    },
    deletePosi(id) {
      var ids = id
        ? [id]
        : this.multipleSelection.map(item => {
            return item.roleId;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/sys/org/update"),
          method: "POST",
          data: this.$http.adornData({
            value: ids.join(","),
            is_del: 1
          })
        }).then(({ data }) => {
          this.getPageData();
        });
      });
    },
    addposi(id, postType) {
      this.addOrUpdatePosiVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatePosi.init(id, postType, {
          lable: this.partName,
          value: this.partId
        });
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style>
.wrapper {
  display: flex;
  flex: 1;
  margin: -20px;
}
.topOpt {
  background-color: #f2f2f2;
  padding: 10px 20px;
}
.topslid {
  background-color: #1890ff;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
.sider {
  border-right: 1px solid #cccccc;
  height: 100%;
}
.topBar {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}
</style>